
        var Canvas={};//命名空、空间
         /*
        1.初始化
        2.画出小圆点 运动
        3.原点连线
        4.鼠标与小圆点的关系
        */
        Canvas.animate={
            //星空特效
            //作者：JHT
            //更新时间：20118/1/16
            adjIfo: {
                num: 70,
                colorList:["white","blue","purple"],
                speed: 4,
                moonStyle: 6,
                dotColor: 'pink',
                dotSize:0.5,
                dotStyle:1,
                lineDotL:50,
                lineMousL:200
            },
            
            init: function(){
//                picBox=document.getElementById("moon");
//                var img=new Image();
//                var urlStr='./image/moon/moon'+this.adjIfo.pic+'.png';
//                img.src=urlStr;
//                picBox.appendChild(img);
                document.getElementById("moonPic").src='/static/talks/image/moon/moon'+this.adjIfo.moonStyle+'.png';
                
                var canvas=document.getElementById("canvas");
                this.cxt=canvas.getContext("2d");
                canvas.width=window.innerWidth;
                canvas.height=window.innerHeight;
      
                
                this.num=this.adjIfo.num;
                this.data=[];//存储圆点初始化坐标点
                this.cw=canvas.width;
                this.ch=canvas.height;
                this.mouseX=0;
                this.mouseY=0;
                
                for(var i=0;i<this.num;i++){//循环遍历，生成每一个随机坐标
                    this.data[i]={
                        x: Math.random()*this.cw   ,
                        y: Math.random()*this.ch   ,
                        //自定义速度增量
                        cX: Math.random()*this.adjIfo.speed-this.adjIfo.speed/2,
                        cY: Math.random()*0.6-0.3
                    };
                   
                }  
                
      onmousemove=function(e){
          Canvas.animate.mouseX=e.clientX;
          Canvas.animate.mouseY=e.clientY;
      };
                        
//        addEventListener("moseMove",function(e){
//                         console.log(""+e.clientX+e.clientY);
//                         });
                
            document.getElementById("moonPic").onclick=function(e){
            var flag=document.getElementById("adjustForm").flag;
            if(flag.value==0){
                document.getElementById("adjustForm").style.visibility='visible';
                document.getElementById("adjustForm").style.width='300px';
//                document.getElementById("adjustForm").style.top=e.clientTop;
//                document.getElementById("adjustForm").style.left+e.clientLeft;
                flag.value=1;
            }       
            else if(flag.value==1){
                document.getElementById("adjustForm").style.width='80px';
                 flag.value=2;
             }
            else if(flag.value==2){
            document.getElementById("adjustForm").style.visibility='hidden';
            
//            document.getElementById("adjustForm").style.top='-500px';
//            document.getElementById("adjustForm").style.left='-500px';
            flag.value=0;
        }
            
    }
                
                
    var dragdiv = document.getElementById("moon");
    var x, y;  //记录到点击时鼠标到移动框(内框）左边和上边的距离

    dragdiv.addEventListener('dragstart', function (e) {
//      e.dataTransfer.effectAllowed = "copy";  //移动效果
      
        e.dataTransfer.setData("text", '');  //附加数据，　没有这一项，firefox中无法移动
        x = e.offsetX || e.layerX;
        y = e.offsetY || e.layerY;
        return true;
    }, false);

    document.addEventListener('dragover', function (e) {//取消冒泡 ,不取消则不能触发 drop事件
        e.preventDefault()|| e.stopPropagation();
    }, false);

    document.addEventListener('drop', function (e) {
//      dragdiv.style.left = (e.pageX - x) + 'px';
//      dragdiv.style.top = (e.pageY - y) + 'px';
        e.preventDefault() || e.stopPropagation();  //不取消，firefox中会触发网页跳转到查找setData中的内容
    }, false);      
      
        dragdiv.ondrag=function(e){
            dragdiv.style.left = (e.pageX - x) + 'px';
            dragdiv.style.top = (e.pageY - y) + 'px';
        }
        
        window.onresize=function(){
          var canvas=document.getElementById("canvas");
                canvas.width=window.innerWidth;
                canvas.height=window.innerHeight;  
        }
     
                return "测试一下闭包";
                },
            
            drawCir: function(x,y){
                var cxt=this.cxt;
                cxt.save();
                if(this.adjIfo.dotStyle){
                    cxt.fillStyle=this.adjIfo.dotColor;
                    cxt.beginPath();
                    cxt.arc(x,y,this.adjIfo.dotSize,Math.PI*2,false);
                    cxt.closePath();
                    cxt.fill();
                    cxt.restore();
                }
                    else{
                        cxt.strokeStyle=this.adjIfo.dotColor;
                        cxt.beginPath();
                        cxt.arc(x,y,this.adjIfo.dotSize,Math.PI*2,false);
                        cxt.closePath();
                        cxt.stroke();
                        cxt.restore();
                        
                    }
         
                },
            
            drawLine: function(x1,y1,x2,y2){
                
                var cxt=this.cxt;
                var color=cxt.createLinearGradient(x1,y1,x2,y2);
                for(var cor in this.adjIfo.colorList)
                    color.addColorStop(cor/this.adjIfo.colorList.length,this.adjIfo.colorList[cor])
              
                cxt.save();
                cxt.strokeStyle=color;
                cxt.beginPath();
                cxt.moveTo(x1,y1);
                cxt.lineTo(x2,y2);
                cxt.closePath();
                cxt.stroke();
                cxt.restore();               
            
        },
            
            moveCir: function(){
                this.cxt.clearRect(0,0,this.cw,this.ch);
                //速度牵引量
                
//                this.drawLine(200,200,400,400)
                
                for(var i=0;i<this.num;i++){
                    this.data[i].x+=this.data[i].cX;
                    this.data[i].y+=this.data[i].cY;
                    //边界判断
                    if(this.data[i].x>this.cw||this.data[i].x<0)
                        this.data[i].cX=- this.data[i].cX;
                    if(this.data[i].y>this.ch||this.data[i].y<0)
                        this.data[i].cY=- this.data[i].cY;
                    
                    //绘制粉点
                    this.drawCir(this.data[i].x,this.data[i].y);
                    //用勾股定理判断是否连线
                    for(var j=i+1;j<this.num;j++){
                        if((this.data[i].x-this.data[j].x)*(this.data[i].x-this.data[j].x)+
                           (this.data[i].y-this.data[j].y)*(this.data[i].y-this.data[j].y) 
                           <= this.adjIfo.lineDotL* this.adjIfo.lineDotL  )
                        this.drawLine(this.data[i].x,this.data[i].y,this.data[j].x,this.data[j].y);
//                      console.log(""+this.data[i].x+"  "+this.data[i].y+"   "+this.data[j].x+"   "+this.data[j].y);       
                    }    
                               
                    if((this.data[i].x-this.mouseX)*(this.data[i].x-this.mouseX)+
                        (this.data[i].y-this.mouseY)*(this.data[i].y-this.mouseY) 
                        <=this.adjIfo.lineMousL* this.adjIfo.lineMousL  )  
//                          this.drawLine(this.data[i].x,this.data[i].y,screenX,screenY);
//                            console.log(""+pageXOffset+"   "+pageYOffset);
                    
                    this.drawLine( this.data[i].x,this.data[i].y, this.mouseX,this.mouseY );
                    
                    
                }
            },
            
            adjAply:function(adjust){
                for(var adj in adjust)
                    this.adjIfo[adj]=adjust[adj];
                this.init();
            }
            
        };
        


        
        Canvas.animate.init();
        //Canvas.animate.drawCir();

        window.onresize = function() {
            // console.log(12);
            Canvas.animate.init();
        };      
      


        (function animloop(){
            window.requestAnimationFrame(animloop); 
             Canvas.animate.moveCir();
        })();
        



function change(){
    var form=document.getElementById("adjustForm");
    var adj={};
    
    if(form.num.value)
        adj.num=form.num.value;
    if(form.speed.value)
        adj.speed=form.speed.value;
    if(form.dotColor.value)
        adj.dotColor=form.dotColor.value;
    if(form.dotSize.value)
        adj.dotSize=form.dotSize.value;
     if(form.lineDotL.value)
        adj.lineDotL=form.lineDotL.value;
    if(form.lineMousL.value)
        adj.lineMousL=form.lineMousL.value;
    
    adj.moonStyle=form.moonStyle.value;
    adj.dotStyle=form.dotStyle.value=="scroke"?0:1;   
    
    if(form.colorList.value)
        adj.colorList=form.colorList.value.split(",");
    
     console.log(adj);
    
    Canvas.animate.adjAply(adj);
}
         
